import React from 'react';
import { Button, Space, Tooltip } from 'antd';
import {
  SearchOutlined,
  PoweroffOutlined,
  DownloadOutlined
} from '@ant-design/icons';
import '../style.css';

// Button 组件教程
const ButtonTutorial = () => {
  return (
    <div className="tutorial-container">
      <h1>Button 按钮组件</h1>
      
      {/* 1. 按钮类型 */}
      <section className="example-section">
        <h2>1. 按钮类型</h2>
        <Space wrap>
          {/* type 属性：primary | default | dashed | text | link */}
          <Button type="primary">Primary Button</Button>
          <Button>Default Button</Button>
          <Button type="dashed">Dashed Button</Button>
          <Button type="text">Text Button</Button>
          <Button type="link">Link Button</Button>
        </Space>
      </section>

      {/* 2. 图标按钮 */}
      <section className="example-section">
        <h2>2. 图标按钮</h2>
        <Space wrap>
          <Tooltip title="搜索">
            <Button type="primary" icon={<SearchOutlined />} />
          </Tooltip>
          <Button icon={<DownloadOutlined />}>Download</Button>
        </Space>
      </section>

      {/* 3. 按钮尺寸 */}
      <section className="example-section">
        <h2>3. 按钮尺寸</h2>
        <Space wrap>
          <Button type="primary" size="large">Large</Button>
          <Button type="primary">Default</Button>
          <Button type="primary" size="small">Small</Button>
        </Space>
      </section>

      {/* 4. 加载状态 */}
      <section className="example-section">
        <h2>4. 加载状态</h2>
        <Space wrap>
          <Button type="primary" loading>Loading</Button>
          <Button type="primary" loading={false}>Not Loading</Button>
        </Space>
      </section>
    </div>
  );
};

export default ButtonTutorial; 